<template>
	<view>
		<view class="px-4 my-2 animate__animated animate__pulse animate__faster">
			<view class="  rounded-lg  bg-red-gradient" @click="login" >
				<view class="p-4 rounded-lg shadow   flex align-center " hover-class="bg-alpha-light"
					hover-start-time="50">

					<template v-if="loginStatus!='已登录'">
						<image :src="defaultAvatar" mode="aspectFill" style="width: 100rpx;height: 100rpx;"
							class="rounded-circle"></image>
					</template>
					<template v-else>
						<image :src="avatar" mode="aspectFill" style="width: 100rpx;height: 100rpx;"
							class="rounded-circle shadow"></image>
					</template>


					<view class="flex flex-column flex-1 px-2 ">

						<template v-if="loginStatus!='已登录'">
							<text class="font-lg text-white font-weight-bold">{{defaultName}}</text>
							<text class="font-sm text-light-white">新用户请登录</text>
						</template>
						<template v-else>
							<text class="font-lg text-white font-weight-bold">{{name}}</text>
						</template>

					</view>
				</view>

			</view>
		</view>


		<view class="px-4 my-4 animate__animated animate__pulse animate__faster">
			<view class="p-2 rounded-lg shadow">
				<block v-for="(item,index) in list" :key="index">
					<view class="px-2" hover-class="bg-light" hover-stay-time="150" @click="openSetting(index)">
						<view class="py-2 flex align-center">
							<view class="flex-1 flex align-center">
								<view class="rounded-circle  flex align-center justify-center"
									:style="'background-color:'+item.backcolor+';height: 60rpx;width: 60rpx;'">
									<text class="iconfont font-lg animate__animated animate__bounceIn animate__slower"
										:class="item.icon" :style="'color:'+item.color+';'"></text>
								</view>
								<view class="p-1">
									<text class="text-dark font">{{item.name}}</text>
								</view>


							</view>
							<text class="iconfont icon-arrow-right-s-line text-light-muted"></text>

						</view>

						<divider v-if="index!==list.length-1"></divider>
					</view>
				</block>
			</view>
		</view>






	</view>
</template>

<script>
	const userlist = uniCloud.database().collection('uni-id-users');
	export default {

		data() {
			return {
				loginStatus: 1,
				defaultName: '',
				defaultAvatar: '',
				name: '',
				avatar: '',
				openid: '',
				list: [
					{
						name: '留言板',
						icon: 'icon-at-fill',
						backcolor: '#5555ff',
						color: '#ffffff'
					},
					{ 
						name: '我的收藏', 
						icon: 'icon-heart-fill',
						backcolor: '#ff557f',
						color: '#ffffff'
					},
				
					{
						name: '帮助中心',
						icon: 'icon-question-fill',
						backcolor: '#55aaff',
						color: '#ffffff',

					},
					{
						name: '意见反馈',
						icon: 'icon-shijuan-tianchong',	
						backcolor: '#ff5500',
						color: '#ffffff'
					},
				
				]
			}
		},
		onLoad() {

			console.log("133")
			this.loginStatus = uni.getStorageSync('loginStatus');
			this.defaultAvatar = uni.getStorageSync('defaultAvatar');
			
			this.defaultName = uni.getStorageSync('defaultName');
			this.openid = uni.getStorageSync('openid');
			this.avatar = uni.getStorageSync('avatar');
			this.name = uni.getStorageSync('name');
			
 
		},
		methods: {
			async login()
			{
				if (uni.getStorageSync('loginStatus') === '已登录')
					return
				else  
					await this.$c.login();
				
			},
		
			async openSetting(e) {

				switch (this.list[e].name) {
					case '帮助中心': {
					
						break; 
					}
					case '意见反馈': { 
						
						break;
					}
 
				}
			}
		}
	}
</script>

<style>

</style>
